<style lang="less" scoped>
  .loginWrapper {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: space-between;
    background-image: url(../assets/login_bg.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .login__content {
      display: flex;
      align-items: center;
      justify-content: center;
      // width: 500px;
      flex: 1;
    }

    .loginContainer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 300px;
      padding: 0 10px;
      box-shadow: 1px 1px 10px 0px #ccc;
      background-color: rgba(38, 43, 45, 0.5);
    }
  }
</style>

<template>
  <div class="loginWrapper" @keydown.enter="handleLogin">
    <div class="login__content">
      <img src="../assets/login_txt.png" width="70%" alt="">
    </div>
    <div class="loginContainer">
      <!-- <h2 style="color: #FFF; font-size: 18px; font-family: '宋体'">厂办大集体系统</h2> -->
      <el-form :model="formModel" style="width: 100%;" :rules="formRules" ref="loginForm">
        <el-form-item prop="uid">
          <el-input :placeholder="$t('placeholder.username')" size="medium" v-model="formModel.uid">
            <i class="iconfont icon-username" style="line-height: 36px;" slot="prefix"></i>
          </el-input>
        </el-form-item>
        <el-form-item prop="pwd">
          <el-input :placeholder="$t('placeholder.password')" type="password" size="medium" v-model="formModel.pwd">
            <i class="iconfont icon-password" style="line-height: 36px;" slot="prefix"></i>
          </el-input>
        </el-form-item>
        <!-- <el-form-item> -->
        <el-button :loading="buttonLoading" style="width: 100%;" size="medium" type="primary" @click="handleLogin">登录</el-button>
        <!-- </el-form-item> -->
      </el-form>
      <!-- <p style="color: #FFF; font-family: '宋体'; font-size: 12px; position: absolute; bottom: 0;">© 2017 版权所有</p> -->
    </div>
  </div>
</template>
<script>
const BASEURL = {
  login: 'Login'
}
export default {
  name: 'login',
  data () {
    return {
      buttonLoading: false,
      formModel: {},
      formRules: {
        uid: { required: true, message: this.$t('validate.notBlank'), trigger: 'blur' },
        pwd: { required: true, message: this.$t('validate.notBlank'), trigger: 'blur' }
      }
    }
  },

  methods: {
    handleLogin () {
      this.$refs['loginForm'].validate(valid => {
        if (valid) {
          this.buttonLoading = true

          let paramsUrl = `?sys_method=${BASEURL.login}`

          this.$axios
            .post(`/ajax.html${paramsUrl}`, this.formModel)
            .then(resp => {
              // let respData = resp
              this.$router.replace({ name: 'home' })
            })
            .finally(() => {
              this.buttonLoading = false
            })
        }
      })
    }
  }
}
</script>
